<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	
	<title>Slides, A Slideshow Plugin for jQuery</title>
	
	<link rel="stylesheet" href="css/global.css">
	
	<script src="js/script.slides.jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
</head>
<body>
<div id="container">
  <div id="example">
    <div id="slides">
      <div class="slides_container">
        <div class="slide"> <a href="index.html" title="หน้าแรก" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
            <div class="caption" style="bottom:0">
              <p>ลอนดอน</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="ญี่ปุ่น" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
            <div class="caption">
              <p>ญี่ปุ่น</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="Happy" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
            <div class="caption">
              <p>Happy Bokeh raining Day</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
            <div class="caption">
              <p>Paris</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
            <div class="caption">
              <p>Newyork</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
            <div class="caption">
              <p>ภูเก็ต,ประเทศไทย</p>
            </div>
        </div>
        <div class="slide"> <a href="index.html" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
            <div class="caption">
              <p>ชะอำ,ประเทศไทย</p>
            </div>
        </div>
      </div>
    </div>
    <img src="img/example-frame.png" alt="Example Frame" name="frame" width="707" height="341" id="frame"> </div>
</div>
</body>
</html>
